<template>
	<view class="container">
		<header-bar :config="config"></header-bar>
		<view class="order-header"></view>
		<view class="order-main">
			<view class="order-item product-item">
				<view class="title-text title-text-flex text-show-line-2">{{ dataInfo.FNAME }}</view>
				<view class="sku">编码：{{ dataInfo.FNUMBER }}</view>
			</view>
			<view class="tab">
				<view @click="tabIndex(1)" :class="tabnum == 1 ? 'active' : ''">
					<view>基础档案 </view><text></text>
				</view>
				<view @click="tabIndex(2)" :class="tabnum == 2 ? 'active' : ''">
					<view>库存余额</view><text></text>
				</view>
				<view @click="tabIndex(3)" :class="tabnum == 3 ? 'active' : ''">
					<view>价格信息</view><text></text>
				</view>
			</view>
			<view v-if="dataInfo">
				<view class="main" v-show="tabnum == 1">
					<view>
						<view class="label">单位：</view>
						<view>{{ dataInfo.FBaseUnitId }}</view>
					</view>
					<view>
						<view class="label">型号：</view>
						<view>{{ dataInfo.FSpecification }}</view>
					</view>
					<view>
						<view class="label">库存：</view>
						<view>{{ total }}</view>
					</view>
				</view>
				<view class="main main1" v-show="tabnum == 2">
					<view v-for="item in dataInfo.StockList">
						<view>{{ item.WarehouseCode }}</view>
						<view>{{ item.Stock }}</view>
					</view>
				</view>
				<view class="main main1" v-show="tabnum == 3">
					<view v-for="item in dataInfo.PriceList">
						<view>{{ item.Name }}</view>
						<view>{{ item.Price }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from "vuex"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetGoodData } from "@/service/api/erp.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
	components: {
		easyProImage,
	},
	data() {
		return {
			config: {
				title: "商品详情",
				color: ["#ffffff"],
				centerSlot: true,
			},

			tabnum: 1,
			dataInfo: {},
			total: 0

		}
	},
	created() {
		let mainColor = this.easyGetColor("main")
		this.config.backgroundColor = [1, mainColor]
	},
	onLoad(e) {
		this.id = e.id
		if (e.FStockOrgID) {
			this.code = e.FStockOrgID
		}
	},

	mounted() { },
	onShow() {
		this.getData()
	},
	onBackPress(options) {
		storage.setCache("returnNum", storage.getCache("returnNum") - 1)
		return false;
	},
	methods: {
		...mapMutations(["UP_ORDER_VIEW"]),
		getData() {
			let param = {
				fullName: this.id,
				code: this.code
			}
			GetGoodData(param).then((res) => {
				this.dataInfo = res;
				let total = 0;
				this.dataInfo.StockList.forEach(item => {
					total = total + item.Stock
				})
				this.total = total
			})
		},
		tabIndex(num) {
			this.tabnum = num
		},
	},
}
</script>

<style lang="scss">
.page {
	background: #F7F7F7;
}

.order-header {
	height: 210rpx;
	background: $app-color-main;
}

.order-main {
	margin-top: -170rpx;
	padding: 0 $app-page-padding $app-page-padding;

	.order-item {
		background: $color-white;
		margin-bottom: 24rpx;
		// background: red;
	}

	.product-item {
		padding: $app-page-padding;
		border-radius: 16rpx;

		.title-text {
			font-weight: 700;
			font-size: 32rpx;
			margin-bottom: 12rpx;
			min-height: 40rpx;
		}

		.sku {
			font-size: 28rpx;
			color: #999;
		}
	}

	.tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		height: 72rpx;
		color: #666;
		margin: 12rpx 0;
		padding-top: 24rpx;

		&>view {
			position: relative;
			height: 72rpx;
			display: flex;
			align-items: center;

			text {
				display: block;
				width: 32rpx;
				height: 6rpx;
				background: $app-color-main;
				border-radius: 4rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -16rpx;
				display: none;
			}
		}

		.active {
			font-weight: bold;
			color: #252528;

			text {
				display: block;
			}
		}
	}

	.main {
		padding: 0 24rpx;
		background: #ffffff;

		&>view {
			height: 90rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #333333;
			border-bottom: 1rpx solid #f0f0f0;

			.label {
				font-weight: bold;
				padding-right: 24rpx;
			}
		}

		&>view:last-child {
			border: none;
		}

	}

	.main1 {
		&>view {
			justify-content: space-between;
		}
	}
}
</style>
